<template>
  <div class="user-info">
    <el-dropdown class="dropdown" @command="handleCommand">
      <el-avatar icon="el-icon-user-solid">{{ userName }}</el-avatar>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="exit">退出</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
    <span>{{ userName }}</span>
  </div>
</template>

<script>
import localCache from "@/utils/cache";
export default {
  data() {
    return {
      // userName: this.$store.state.userInfo.user_name,
      userName:this.$store.state.userInfo.name
    };
  },
  methods: {
    handleCommand(command) {
      if (command === "exit") {
        localCache.clearCache();
        this.$router.push("/login");
        window.sessionStorage.removeItem('active')
      }
    },
  },
  created(){
    console.log(this.$store.state.userInfo.name);
  }
};
</script>

<style scoped lang="less">
.user-info {
  display: flex;
  align-items: center;
  span {
    margin-right: 10px;
  }
}

.dropdown {
  display: flex;
}
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.demonstration {
  display: block;
  color: #8492a6;
  font-size: 14px;
  margin-bottom: 20px;
}

.el-dialog {
  margin-top: 10vh !important;
}
.el-form-item__label {
  float: left !important;
}
</style>
